<template>
  <div class="box">
    <div class="box1">
      <div @click="add" class="btn">弹框</div>
      <box
        :isShow="isShow"
        :title="msg"
        :title1="msg1"
        :title2="msg2"
        @qu="qu"
        @que="que"
        @cha="cha"
      ></box>
      <div class="btn1" @click="$router.push('/nav')">跳Tab</div>
      <div class="btn2" @click="$router.push('/banner')">轮播图</div>
      <div class="btn3" @click="$router.push('/Xingxing')">星星评分</div>
      <div class="btn4" @click="$router.push('/back')">返回顶部</div>
      <div class="btn5" @click="$router.push('/tost')">toast(轻提示)</div>
    </div>
  </div>
</template>

<script>
import box from "../components/box";
export default {
  name: "",
  components: {
    box,
  },
  data() {
    return {
      isShow: false,
      msg: "登录",
      msg1: "取消",
      msg2: "我是一个文本",
    };
  },
  created() {},
  mounted() {},
  methods: {
    add() {
      this.isShow = !this.isShow;
    },
    qu(isShow1) {
      this.isShow = isShow1;
    },
    que(isShow1) {
      this.isShow = isShow1;
    },
    cha(isShow1) {
      this.isShow = isShow1;
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  overflow: hidden;
  width: 1000px;
  height: 1000px;
  background-image: linear-gradient(
    to right,
    #eea2a2 0%,
    #bbc1bf 19%,
    #57c6e1 42%,
    #b49fda 79%,
    #7ac5d8 100%
  );
  margin: 0 auto;
  border-radius: 50%;
  .box1 {
    margin-top: 200px;
    .btn {
      margin: 50px auto;
      width: 150px;
      height: 60px;
      background: red;
      line-height: 60px;
      text-align: center;
      color: #fff;
    }
    .btn1 {
      margin: 50px auto;
      width: 150px;
      height: 60px;
      background: blue;
      line-height: 60px;
      text-align: center;
      color: #fff;
    }
    .btn2 {
      margin: 50px auto;
      width: 150px;
      height: 60px;
      background: yellow;
      line-height: 60px;
      text-align: center;
      color: #fff;
    }
    .btn3 {
      margin: 50px auto;
      width: 150px;
      height: 60px;
      background: purple;
      line-height: 60px;
      text-align: center;
      color: #fff;
    }
    .btn4 {
      margin: 50px auto;
      width: 150px;
      height: 60px;
      background: orangered;
      line-height: 60px;
      text-align: center;
      color: #fff;
    }
    .btn5 {
      margin: 50px auto;
      width: 150px;
      height: 60px;
      background: orange;
      line-height: 60px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
